<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!--[if lt IE 9]>
  <meta http-equiv="refresh" content="0;ie.html" />
  <![endif]-->

  <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
   <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
  <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
  <link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
      <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
  <script src="__STATIC__/layout/js/jquery.min.js"></script>
  <!-- Sweet Alert -->
  <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
  <!-- Sweet alert -->
  <script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
  <!-- layer javascript -->
  <script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
 <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
    <script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script> 
</head>
<body class="white-bg" style="color:#333;padding:3px;">
 <!-- 标题 -->
    <div class="page-heade">
        <h2 class="title_color text-center">出库记录列表</h2>
    </div>
    <!-- 标题 -->
<div class="row-margin-top" >
<form role="form" id="form1" class="form-inline" method="get" action="#">
  <table class="table-bordered table">
    <tr>
      <td style="width: 140px;" class="text-right">单号：</td>
      <td><input type="text" class="form-control" name="" id=""></td>
      <td style="width: 140px;" class="text-right">出库时间：</td>
      <td>
          <div class="form-group">
            <input type="text" id="start" class="form-control layer-date " style="min-width:120px;width:120px;display: inline-block;" name="">
           </div>
            <div class="form-group">
                至
            </div>
           <div class="form-group">
            <input type="text" class="form-control layer-date" style="min-width:120px;width:120px;display: inline-block;" id="end" name="">
           </div>
      </td>
    </tr>
    <tr>
      <td class="text-right">出库产品：</td>
      <td colspan="3">
         <div class="input-group text-center">
                            <input id="area_id" type="text" placeholder="请输入关键字或空格查询"
                                   class="form-control" value="" style="min-width: 300px;width: 300px">
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    <a href="javascript:;" id="select_area" class="btn btn-primary btn-sm">选择</a><button class="btn btn-sm btn-info">查询</button>
                <span>请选择需要查询的查询的出库产品或者输入产品名称，点击查询后在下拉菜单里面选择相应的产品。</span>
      </td>
    </tr>
    <tr>
      <td class="text-right">发货人：</td>
      <td colspan="3">
         <div class="input-group text-center">
                            <input id="area_id" type="text" placeholder="请输入关键字或空格查询"
                                   class="form-control" value="" style="min-width: 300px;width: 300px">
                            <div class="input-group-btn">
                             <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-info query">查询</button>
                    <a href="javascript:;" id="select_area" class="btn btn-primary btn-sm">选择</a>
                <span>请选择需查询的发货人或者输入发货人名称，点击查询后在下拉菜单里面选择相应的人员。</span>
      </td>
    </tr>
     <tr>
      <td class="text-right">经销商名称：</td>
      <td colspan="3">
         <div class="input-group text-center">
                            <input id="area_id" type="text" placeholder="请输入关键字或空格查询"
                                   class="form-control" value="" style="min-width: 300px;width: 300px">
                            <div class="input-group-btn">
                             <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-info query">查询</button>
                    <a href="javascript:;" id="select_area" class="btn btn-primary btn-sm">选择</a>
                <span>请选择经销商或者输入经销商名称，点击查询后在下拉菜单里面选择相应的经销商。</span>
      </td>
    </tr>
  </table>
    </form>
  </div>
 
    <table class="table table-striped table-bordered table-hover bud_hei text-center" id="editable">
      <tr class="info">
        <th class="text-center">No</th>
        <th class="text-center">出库单号</th>
        <th class="text-center">出库产品</th>
        <th class="text-center">出库数量</th>
        <th class="text-center">出库价格</th>
        <th class="text-center">出库金额</th>
        <th class="text-center">出库时间</th>
        <th class="text-center">操作人</th>
      </tr>
     <tbody>
      
    </table>

   <!--  <h5 class="text-center"  style="font-size: 13px;font-weight: 500">
                    总共有12条记录，第1/2页,当前页<input id="page" type="text"  style="width: 40px" value="1"/><span id="gopage">Go</span>&nbsp;&nbsp;<span id="fistpage">首页</span>&nbsp;&nbsp;
                    每页显示
                    <select id="pagesize">
                        <option value='10' selected>10条</option>
                        <option value='15'>15条</option>
                        <option value='20'>20条</option>

                    </select>
                </h5> -->
</body>
</html>
<script>
     //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);

     /*请输入关键字或空格查询*/
  var jieshou = $("#area_id");
 sousuo(jieshou);
       function sousuo(id){
            id.bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true, //以分隔符号分割的多关键字支持
            separator: ",", //多关键字支持时的分隔符，默认为空格
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            jsonp: 'cb',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                // console.log(json);
                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                //字符串转化为 js 对象
                return data;
            }
        });

          }
 
</script>